<template>
 <div>
    <span>全选:</span>
    <!-- 4. v-model 关联全选 - 选中状态 -->
    <input type="checkbox" v-model="isAll"/>
    <button @click="btn">反选</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <!-- 3. 对象.c - 关联 选中状态 -->
        <input type="checkbox" v-model="item.c"/>
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
	// 目标: 小选框 -> 全选
	export default {
		data() {
			return {
				arr: [{
						name: "猪八戒",
						c: false,
					},
					{
						name: "孙悟空",
						c: false,
					},
					{
						name: "唐僧",
						c: false,
					},
					{
						name: "白龙马",
						c: false,
					},
				],
			};
		},
		computed: {
			// isAll(){
      //   return this.arr.every(item => item.c)
			// }
			isAll:{
				get(){
            return this.arr.every(item => item.c)
				},
				set(val){
           console.log(val);
					 this.arr.forEach(item => item.c = val)
				}
			}
		},
    methods: {
			btn(){
			return	this.arr.forEach(item => item.c = !item.c)
			}
		}
	};
</script>

<style>
</style>
